<template>
  <div>
    <!--专业信息表格-->
    <el-table
        :data="tableData"
        row-key="id"
        border
        stripe
        style="width: fit-content; margin-top: 10px;">
      <el-table-column
          prop="major"
          label="专业"
          width="160">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="editHandle(scope.row.major)" type="text" size="small">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定要删除这条记录吗？" @confirm="delHandle(scope.row.major)" >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--修改专业信息-->
    <el-dialog title="修改专业信息" :visible.sync="dialogFormVisible" width="600px" @closed="resetMajorForm('majorForm')">
      <el-form :model="majorForm" :rules="majorFormRules" ref="majorForm">
        <el-form-item label="旧专业名" prop="major" label-width="100px">
          <el-input v-model="majorForm.oldName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="新专业名" prop="newMajor" label-width="100px">
          <el-input v-model="majorForm.newName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetMajorForm('majorForm')">取 消</el-button>
        <el-button type="primary" @click="submitMajorForm('majorForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Majors",
  data() {
    return {
      //表格数据
      tableData: [
      ],

      majorForm:{},

      dialogFormVisible: false,

      //专业表单规则
      majorFormRules: {
        newName: [
          {required: true, message: '请输入新专业名称', trigger: 'blur'},
          {pattern:/^([\u4E00-\uFA29]*[a-z]*[A-Z]*)+$/,message: "只能出现中文或英文字符",trigger:"blur"}
        ],
      }
    }
  },
  created() {
    this.getMajorList();
  },
  methods:{
    //获取专业列表
    getMajorList(){
      this.$axios.get('/sys/major/list').then(res => {
        this.tableData = res.data.data
      })
    },

    //提交编辑专业表单
    submitMajorForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/major/update' ,this.majorForm)
              .then(res => {
                console.log(res.data)
                this.resetMajorForm(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getMajorList()
                  }
                });
              })
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },

    //手动编辑
    editHandle(major) {
      console.log(major);
      this.majorForm.oldName = major;
      this.dialogFormVisible = true;
    },
    //手动删除
    delHandle(major) {
      this.$axios.post("/sys/major/delete?", {major:major}).then(res => {
        console.log(res)
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success',
          onClose: () => {
            this.getMajorList()
            //刷新一下
            window.location.reload();
          }
        });
      })
    },
    //重设专业表单
    resetMajorForm(formName){
      this.$refs[formName].resetFields();
      this.majorForm = {}
      this.dialogFormVisiblecd = false
    },


  }
}
</script>

<style scoped>

</style>